<template>
  <div class="success">
    <div class="header">
      <img :src="successImg" alt="" />
    </div>
    <div class="content">
      <p>1, {{ hongbao }} 元红包已发放至您的零钱</p>
      <p>2, {{ brand }}优惠券已发放您的{{brand}}账户</p>
      <p class="liucheng"><span> 使用流程</span></p>
      <p>使用相同手机号码登录“{{brand}}权益商城”(http://jifen.pisen.com.cn/index.html#/)，使用兑换的手机号码注册，即可查看和使用。</p>
    </div>
    <div class="service">专属客户经理: 4008256216</div>
    <div class="back" @click="back">返回首页</div>
  </div>
</template>

<script>
export default {
  name: "success",
  data(){
    return{
      successImg:'',
      brand:'',
      hongbao:0
    }
  },
  mounted(){
    this.hongbao = this.$route.query.hongbao;
    this.brand = this.$route.query.brand
    if(this.brand == '顺丰'){
      this.successImg = require("../assets/sfSuccess.jpg");
    }
    if(this.brand == '飞猪'){
      this.successImg = require("../assets/fzSuccess.jpg");
    }
    if(this.brand == '品胜'){
      this.successImg = require("../assets/psSuccess.jpg");
    }
    
  },
  methods:{
    back(){
        this.$router.replace('/index')
    }
  }
};
</script>

<style lang="scss" scoped>
.success {
  background: #fcebf1;
  padding-bottom: 0.8rem;
  height: 100vh;
  .header {
    height: 0 0 5rem;
    img {
      width: 100%;
    }
  }
  .content {
    margin: auto;
    margin-top: 0.5rem;
    padding: 0.5rem;
    text-align: left;
    background: white;
    border-radius: 0.5rem;
    width: 80%;
    .liucheng {
      text-align: center;
      margin: 0.2rem 0;
      span {
        border-bottom: 1px solid red;
      }
    }
  }
  .service {
    font-size: 0.5rem;
    border-bottom: 1px solid #ba4f51;
    color: #ba4f51;
    width: 80%;
    text-align: center;
    margin: auto;
    margin-top: 1rem;
  }
  .back{
    width: 40%;
    color:#ba4f51 ;
    padding: 0.3rem ;
    text-align: center;
    margin: auto;
    border:1px solid #ba4f51;
    border-radius: 1rem;
    margin-top: 1rem;
  }
}
</style>